import { columnListForSelect, createArticle, queryArticleDetail, updateArticle } from '@/service/article-column';
import { PageContainer } from '@ant-design/pro-components';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/i18n/zh-cn';
import '@toast-ui/editor/dist/toastui-editor.css';
import { history, useParams } from '@umijs/max';
import { Button, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import PublishModal from './components/PublishModal';

const ArticleDetail: React.FC = () => {
  const editor = useRef(null);
  const { id } = useParams(); // 获取路径参数 id
  const [open, setOpen] = useState(false);
  const [modalInfo, setModalInfo] = useState(false);
  // 专栏列表
  const [columnList, setColumnList] = useState([]);

  // 发布 - 弹窗
  const prevPublish = async () => {
    // 查询专栏列表
    const res = await columnListForSelect();
    setColumnList(res || []);
    setOpen(true);
  };

  // 发布 - 取消弹窗 缓存下信息
  const onCancel = (values) => {
    setModalInfo(values);
  };

  // 发布 - 提交
  const publish = async (values) => {
    const markdown = editor?.current?.getMarkdown();
    if (!markdown) {
      message.error('文章内容必填');
    }

    let res = null
    const params = {
      ...values,
      content: markdown,
    }

    if (id) {
      // 修改
      res = await updateArticle(id, params)
    } else {
      // 新建
      res = await createArticle(params);
    }
    

    if (res) {
      message.success('操作成功');
      setOpen(false);
      history.go(-1);
      return;
    }
  };

  // getMarkdown(): 获取当前编辑器中的 Markdown 源码。
  // getHtml(): 获取当前编辑器内容转换为 HTML 的结果。
  // setMarkdown(markdownString): 设置编辑器中的 Markdown 内容。
  // setHtml(htmlString): 设置编辑器中的 HTML 内容。
  // getCurrentMode(): 获取当前编辑模式（markdown 或 wysiwyg）。
  // changeMode(mode): 改变编辑器模式。

  // 查询文章详情
  useEffect(() => {
    if (id) {
      queryArticleDetail(id).then((res) => {
        if (res) {
          editor.current?.setMarkdown(res.content);
          setModalInfo({
            title: res.title,
            description: res.description,
            columnIds: res.columnIds,
          });
        }
      });
    }
  }, [id]);

  useEffect(() => {
    if (document.querySelector('#editor')) {
      editor.current = new Editor({
        el: document.querySelector('#editor'),
        height: '650px',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        language: 'zh-CN',
      });
    }
  }, []);

  return (
    <PageContainer
      header={{
        title: false,
        extra: [
          <Button key="publish" type="primary" onClick={prevPublish}>
            发布
          </Button>,
        ],
      }}
      style={{ background: '#fff' }}
    >
      <div id="editor"></div>
      <PublishModal
        open={open}
        columnList={columnList}
        onOpenChange={setOpen}
        onFinish={publish}
        onCancel={onCancel}
        modalInfo={modalInfo}
      />
    </PageContainer>
  );
};

export default ArticleDetail;
